<template>
  <Card
    :tab-list="tabListTitle"
    v-bind="$attrs"
    :active-tab-key="activeKey"
    @tab-change="onTabChange"
  >
    <p v-if="activeKey === 'tab1'">
      <VisitAnalysis :daylog="safeEchartList.dayLogs" />
    </p>
    <p v-if="activeKey === 'tab2'">
      <VisitAnalysisBar :daylog="safeEchartList.hourLogs" />
    </p>
  </Card>
</template>
<script lang="ts" setup>
  import { ref, computed, watch } from 'vue';
  import { Card, message } from 'ant-design-vue';
  import VisitAnalysis from './VisitAnalysis.vue';
  import VisitAnalysisBar from './VisitAnalysisBar.vue';
  import { useI18n } from '@/hooks/web/useI18n';

  const props = defineProps({
    loading: Boolean,
    echartList: {
      type: Object,
      default: () => ({}),
    },
  });

  // 创建安全的echartList计算属性，确保始终有默认值
  const safeEchartList = computed(() => {
    const list = props.echartList || {};
    return {
      dayLogs: list.dayLogs || [],
      hourLogs: list.hourLogs || [],
      data: {
        dayLogs: list.data?.dayLogs || [],
        hourLogs: list.data?.hourLogs || [],
      },
    };
  });
  console.log('====================================');
  console.log(safeEchartList);
  console.log('====================================');
  // 监听echartList变化，添加调试信息
  watch(
    () => props.echartList,
    (newVal) => {
      console.log('echartList updated:', newVal);
      // 如果数据为空，可以显示提示信息
      if (!newVal || (!newVal.dayLogs && !newVal.hourLogs && !newVal.data)) {
        console.log('Warning: echartList is empty or invalid');
      }
    },
    { deep: true, immediate: true },
  );

  const activeKey = ref('tab1');
  const { t } = useI18n();
  const tabListTitle = [
    {
      key: 'tab1',
      tab: t('sys.analysis.every5'),
    },
    {
      key: 'tab2',
      tab: t('sys.analysis.omniHora'),
    },
  ];

  function onTabChange(key) {
    activeKey.value = key;
  }
</script>
